import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";
import { clear } from "@testing-library/user-event/dist/clear";
const list = [
  [null, null, null, '刘波', null, null, null, null],
  ["赵振宇", "为之所", "故其根", "韩帅印", "孙兵开",  "端星星",  "程少",  "撞治好", ],
  ["孙娟", "是累加", "张如玉", "柳工", "写成龙", "李昭", "陆宣", "类金龙"],
  ["草率光", "张一飞", "学委", "刘聪", "和迎接", "加馍", "利雅文", "王增超"],
  [null, null, null, '杨紫菱', null, null, null, null],
];
const q = 5, w = 8;
function App() {
  const [disabled, setDisabled] = useState(false)
  const randomColor = () => "#" + Math.random().toString(16).slice(2, 8);
  const random = (min, max) =>
    Math.floor(Math.random() * (max - min + 1) + min);
  const getIndex = () => {
    while(true) {
      const [x, y] = [random(0, q - 1), random(0, w -1)];
      if(list[x][y]) return [x, y]
    }
  }
  const handleClick = () => {
    setDisabled(true)
    const timer = setInterval(() => {
      const [x, y] = getIndex();
      setX(x);
      setY(y);
      setBg(randomColor());
    }, 50);

    setTimeout(() => {
      clearInterval(timer);
       setDisabled(false)
    }, 3000)
  };
  const [x, setX] = useState(-1);
  const [y, setY] = useState(-1);
  const [bg, setBg] = useState("#fff");
  return (
    <div className="App">
      <ul>
        {list.map((v, i) => {
          return (
            <li key={i}>
              <ol>
                {v.map((v, j) => {
                  return (
                    <li
                      key={j}
                      style={{ background: i === x && j === y ? bg : "#fff" }}
                    >
                      {v || "X"}
                    </li>
                  );
                })}
              </ol>
            </li>
          );
        })}
      </ul>
      <button onClick={() => handleClick()} disabled={disabled}>开始抽取人名</button>
    </div>
  );
}

export default App;
